<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <parent></parent>
       </div>
    </body>
</html>
<script>
    //1.子组件构造器
    let child1=Vue.extend({
        template:`
        <img src="img/1.png" width="200" height="200">
        `
    });
    let child2=Vue.extend({
        template:`
        <p>我是一张图片</p>
        `
    });
    //2.父组件构造器
    Vue.component("parent",{
        components:{
            'my_child1':child1,
            'my_child2':child2
        },
        template:`
        <div>
        <my_child1></my_child1>
        <my_child2></my_child2>
        </div>
        `
    })
    let vm=new Vue({
        el:'#app',
        data:{
            message:'你好，世界！'
        }
    })
</script>